<template>
  <div class="help-center min-h-screen bg-gradient-to-br from-white via-gray-50 to-gray-100">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-nav bg-white border-b py-3 shadow-sm">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="container py-10">
      <h1 class="text-2xl md:text-3xl font-medium mb-8 text-center relative">
        帮助中心
        <span class="block h-1 w-20 bg-red-600 mx-auto mt-2 rounded-full"></span>
      </h1>
      
      <!-- 服务保障图标区 -->
      <div class="service-guarantee flex flex-wrap justify-between mb-12 border-b pb-8">
        <div class="service-item flex items-center p-4 rounded-lg transition-all hover:bg-white hover:shadow-md">
          <el-icon class="text-red-600 text-3xl mr-3"><RefreshRight /></el-icon>
          <span class="text-lg">正品保障</span>
        </div>
        <div class="service-item flex items-center p-4 rounded-lg transition-all hover:bg-white hover:shadow-md">
          <el-icon class="text-red-600 text-3xl mr-3"><GoodsFilled /></el-icon>
          <span class="text-lg">阿蔓达医药商城品质保证</span>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { RefreshRight, GoodsFilled } from '@element-plus/icons-vue'
</script>

<style scoped>
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

.help-menu .el-menu-item {
  height: 45px;
  line-height: 45px;
  transition: all 0.3s;
}

.help-menu .el-menu-item:hover {
  background-color: #fef2f2;
}

.help-menu .el-menu-item.is-active {
  color: #e1251b;
  background-color: #fef2f2;
  font-weight: 500;
}

.contact-card {
  transition: all 0.3s;
  border-top: 3px solid transparent;
}

.contact-card:hover {
  transform: translateY(-5px);
  border-top: 3px solid #e1251b;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .service-guarantee {
    justify-content: space-around;
  }
  
  .service-item {
    margin-bottom: 1rem;
    width: 45%;
  }
}

@media (max-width: 640px) {
  .service-item {
    width: 100%;
  }
}

/* 折叠面板样式优化 */
:deep(.el-collapse-item__header) {
  font-size: 1rem;
  padding: 0.5rem 0;
  font-weight: 500;
}

:deep(.el-collapse-item__header:hover) {
  color: #e1251b;
}

:deep(.el-collapse-item__arrow) {
  margin-right: 0.5rem;
}

:deep(.el-collapse-item__wrap) {
  background-color: transparent;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 1rem;
}

/* 卡片内容区域样式 */
.card-content {
  padding: 0.5rem;
}
</style> 